CSS 設計手法

何故設計手法が大事なのか

体系立ててコードを管理することによって、メンテナンス性を向上させるため

全体的に管理の行き届いた設計にする

複数人で開発できるように

誰が書いても迷いが生じ無い、設計手法を知らない人でもWebをちょっと調べればすぐに扱えるようにする

コードに迷いを生じさせないため

コーディング中に迷いが生じたら、スタイルガイドを基に判断・解決する

--.icon

主要な設計手法

OOCSS

オブジェクト指向に基づいて考案された設計手法

要素をContainerとContentsに切り離して考える

コンテナとコンポーネントの分離

要素をStructureとSkinに切り離して考える

構造と見た目の分離

メリット

コード量が少なくなる

デメリット

影響範囲が大きくなる可能性がある

why?

BEM

hmtl構造を名確認することに軸を置いた設計手法

要素をBlock、Element、Modifierの三つに分ける

Block_Element_Modifierという命名ルールを用いる

メリット

影響範囲が小さくなる

why?

デメリット

コード量が多くなる

SMACSS

以下の5つのフォルダーに分けてCSSを管理する

ベース

bodyやinputなど、要素にスタイルを指定するものを指します。ベースルールの中にCSSリセットも含まれます。

レイアウト

レイアウトは、その名の通りページのレイアウトを指定するものを指します。

モジュール

ボタンやタイポグラフィなど、コンポーネントのようなパーツのことを指します。

ステート

.is-errorや.is-activeなど、状態によって見た目が変化する場合のスタイルを指定するものを指します。

テーマ

ベースカラーやメインカラーなど、デザイン全体で統一されるべきスタイルのことをテーマと呼びます。

メリット

スタイルの再利用性が高い

デメリット